var StudioCommentPage=React.createClass({
	getInitialState:function(){
		return {
			problems_notAnswer:null,
			problems_notAnswer_loaded:false,
			problems_answered:null,
			problems_answered_loaded:false,
			activePage:0
		};
	},
	componentDidMount:function(){
	  $.ajax({
	    url:config.api.getAllStudentProblem[0].replace(/\<\w+\>/,this.props.studioId),
	    type:config.api.getAllStudentProblem[1],
	    data:{
	    	aType :2//1表示“学员提问”，2表示“画作点评”
	    },
	    success:function(d){
	      console.log(d);
	      this.setState(
	            {
	              problems_notAnswer:d.problems,
	              problems_notAnswer_loaded:true
	            }
	        );
	    }.bind(this),
	    error:function(e) {
	      alert("获取学员信息失败")
	    }
	  });//加载未点评问题
	  $.ajax({
	    url:config.api.getAllAnsweredProblem[0].replace(/\<\w+\>/,this.props.studioId),
	    type:config.api.getAllAnsweredProblem[1],
	    success:function(d){
	      console.log(d);
	      this.setState(
	            {
	              problems_answered:d.problems,
	              problems_answered_loaded:true
	            }
	        );
	    }.bind(this),
	    error:function(e) {
	      alert("获取已点评问题失败")
	    }
	  });//加载已点评问题
	},
	reload:function(){
		$.ajax({
		  url:config.api.getAllStudentProblem[0].replace(/\<\w+\>/,this.props.studioId),
		  type:config.api.getAllStudentProblem[1],
		  data:{
		  	aType :2//1表示“学员提问”，2表示“画作点评”
		  },
		  success:function(d){
		    this.setState(
		          {
		            problems_notAnswer:d.problems,
		            problems_notAnswer_loaded:true
		          }
		      );
		  }.bind(this),
		  error:function(e) {
		    
		  }
		});//加载未点评问题
		$.ajax({
		  url:config.api.getAllAnsweredProblem[0].replace(/\<\w+\>/,this.props.studioId),
		  type:config.api.getAllAnsweredProblem[1],
		  success:function(d){
		    this.setState(
		          {
		            problems_answered:d.problems,
		            problems_answered_loaded:true
		          }
		      );
		  }.bind(this),
		  error:function(e) {
		    
		  }
		});//加载已点评问题
	},
	setActivePage:function(page) {
		this.setState({activePage:page});
	},
	render :function() {
		if(this.state.problems_notAnswer_loaded&&this.state.problems_answered_loaded){
			console.log("page",this.state.problems_answered);
			return (
				<div id="StudioCommentPage">
					<StudioCommentToolBar notAnswerNum={this.state.problems_notAnswer.length} answerNum={this.state.problems_answered.length} activePage={this.state.activePage} setActivePage={this.setActivePage}/>
					<StudioCommentList studioId={this.props.studioId} reload={this.reload} problems={this.state.activePage?this.state.problems_notAnswer:this.state.problems_answered}/>
				</div>
				);
		}else{
			return (
				<div id="StudioCommentPage">
					<StudioCommentToolBar activePage={this.state.activePage}/>
					<p>问题加载中</p>
				</div>
				);
		}

	}
});
var StudioCommentToolBar=React.createClass({
	toalreadyCommented:function(){
		this.props.setActivePage(0);
	},
	tonotComment:function(){
		this.props.setActivePage(1);
	},
	render:function(){
			return (
				<div id="StudioCommentToolBar">
					<div className={this.props.activePage==0?"toolBarBtn active":"toolBarBtn"} id="alreadyCommented" onClick={this.toalreadyCommented}>
						<span>已点评（{this.props.answerNum}）</span>
					</div>
					<div className={this.props.activePage==1?"toolBarBtn active":"toolBarBtn"} id="notComment" onClick={this.tonotComment}>
						<span>未点评（{this.props.notAnswerNum}）</span>
					</div>
				</div>
				);
	}
});
var StudioCommentList=React.createClass({
	getInitialState:function(){
		return (
			{
				commentTo:"",//要点评的问题的id
				oldAnswer:"",//原本的答案 
				mode:0//0代表点评,1代表修改 
			}
			);
	},
	commentTo:function(id){
		this.setState({
			commentTo:id,
			mode:0
		});
	},
	modifyAnswerTo:function(id){
		this.setState({
			modifyAnswerTo:id,
			mode:1
		});
	},
	validate:function(comment){
		if(comment.length>140){
			return false;
		}else if(comment==""){
			return false;
		}else{
			return true;
		}
	},
	modifyAnswer:function(){
		console.log("修改答案id",this.state.modifyAnswerTo);
		var comment=$("#commentTextarea").val();
		if(!this.validate(comment)) return ;//应该提示错误，未写
		$.ajax({
			url:config.api.modifyAnswer[0].replace(/\<answer_id\>/,this.state.modifyAnswerTo).replace(/\<studio_id\>/,this.props.studioId),
			type:config.api.modifyAnswer[1],
			data:{
				content:comment
			},
			success:function(){
				alert("修改成功");
				$("#commentTextarea").val("");
				$('#commentModal').modal('hide');
				this.props.reload();//刷新
				
			}.bind(this),
			error:function(){
				alert("修改失败");
			}
		});
	},
	publishcomment:function(){
		var comment=$("#commentTextarea").val();
		if(!this.validate(comment)) return ;//应该提示错误，未写
		$.ajax({
			url:config.api.answerProblem[0].replace(/\<\w+\>/,this.props.studioId),
			type:config.api.answerProblem[1],
			data:{
				content:comment,
				problemId:this.state.commentTo
			},
			success:function(){
				alert("点评成功");
				$("#commentTextarea").val("");
				$('#commentModal').modal('hide');
				this.props.reload();//刷新
				
			}.bind(this),
			error:function(){
				alert("点评失败");
			}
		});
	},
	cancelcomment:function(){
		$("#commentTextarea").val("");
		$('#commentModal').modal('hide');
	},
	confirmHandler:function(){
		if(!this.state.mode){
			this.publishcomment();
		}else{
			this.modifyAnswer();
		}
	},
	render:function(){
		var self=this;
		return (
				<div id="StudentProblemList">
					{this.props.problems.map(function(problem) {
						return (<StudioCommentItem commentTo={self.commentTo} modifyAnswerTo={self.modifyAnswerTo} problem={problem}/>);
					})}
					<div className="modal fade" id="commentModal" tabindex="-1" role="dialog" aria-labelledby="commentModalLabel" aria-hidden="true">
					  <div className="modal-dialog">
					    <div className="modal-content commentContainer">
					    	<div className="commentHeader">
					    		<p>点评</p>
					    	</div>
					    	<div className="commentBody">
					    		<p>最多输入140个字符</p>
					    		<textarea id="commentTextarea" placeholder="在此输入点评"></textarea>
					    		<div className="actionBtns">
					    		  <button className="btn btn-default btn-md" id="cancelcommentBtn" onClick={this.cancelcomment}>取消</button> 
					    		  <button className="btn btn-primary btn-md" id="publishcommentBtn" onClick={this.confirmHandler}>确定</button>     
					    		</div>
					    	</div>

					    </div>
					  </div>
					</div>
				</div>

			);
		
	}
});
var StudioCommentItem=React.createClass({
	formatDate:function(timestamp){  
	              var dateObj=new Date(timestamp);   
	              var   year=dateObj.getYear()+1900;     
	              var   month=dateObj.getMonth()+1;     
	              var   date=dateObj.getDate();     
	              var   hour=dateObj.getHours();     
	              var   minute=dateObj.getMinutes();       
	              return   year+"-"+month+"-"+date+"   "+hour+":"+(minute<10?"0"+minute:minute);     
	}, 
	setTargetProblem:function(e){
		var id=$(e.target).data("problemid");
		this.props.commentTo(id);
	},
	setTargetAnswer:function(e){
		var oldAnswer=$(e.target).closest(".commentSection").find(".commentContent").text();
		$("#commentTextarea").val(oldAnswer);
		var id=$(e.target).data("answerid");
		this.props.modifyAnswerTo(id);
	},
	render:function(){
		var image;
		if(this.props.problem.image!=""){
			image=<div className="paintings">
			      	<img src={this.props.problem.image}/>
			      </div>;
		}else{
			image=<div className="paintings">
			      </div>;
		};//图片部分


		if(this.props.problem.answerNum){
			//有点评
			return (
				<div className="StudioComment" >
				  <div className="left-col">
				    <div className="avatarWrapper">
				    	<img src={this.props.problem.avatarUrl}/>
				    </div>
				    <div className="triangle"></div>
				  </div> 
				  <div className="right-col">
				    <div className="problem-details">
				      <h5>{this.props.problem.name}</h5>
				      <h6>{this.formatDate(this.props.problem.timestamp)}</h6>
				      <h5>{this.props.problem.content}</h5>
				      {image}
				    </div>
				    <div className="commentSection">
				    	<div className="commentSection_head">
				    		<span >点评:</span>
				    		<span className="editComment" onClick={this.setTargetAnswer} data-answerid={this.props.problem.answerId} data-toggle="modal" data-target="#commentModal">修改</span>
				    	</div>
				    	<p className="commentContent">{this.props.problem.answer}</p>
				    </div>
				  </div> 
				</div>
				);
		}else{
			//无点评
			return (
				<div className="StudioComment" >
				  <div className="left-col">
				    <div className="avatarWrapper">
				    	<img src={this.props.problem.avatarUrl}/>
				    </div>
				    <div className="triangle"></div>
				  </div> 
				  <div className="right-col">
				    <div className="problem-details">
				      <h5>{this.props.problem.name}</h5>
				      <h6>{this.formatDate(this.props.problem.timestamp)}</h6>
				      <h5>{this.props.problem.content}</h5>
				      {image}
				    </div>
				   	<span className="comment"  onClick={this.setTargetProblem} data-problemid={this.props.problem.problemId} data-toggle="modal" data-target="#commentModal">点评</span>
				  </div> 
				</div>
				);
		}


	}
});